<template>
  <view class="login-box">
    <u-navbar
      :auto-back="true"
      placeholder
      bg-color="transparent"
    />

    <view class="lined absolute z-0 h-full w-full" />
    <view class="relative">
      <view class="login-form-wrap">
        <view class="mb-[30rpx] flex flex-col items-center">
          <image src="@/static/images/pages/image.png" class="h-[176rpx] w-[176rpx]" mode="aspectFit" />
          <view class="mt-[30rpx] flex flex-col items-center text-[32rpx]">
            <span>飞逸美选</span>
            <span>更懂你的小程序</span>
          </view>
        </view>
      </view>
      <view class="flex justify-center">
        <image src="@/static/images/pages/ng.png" class="h-[644rpx] w-[670rpx]" mode="aspectFit" />
      </view>

      <view class="mt-[60rpx] flex flex-col items-center">
        <view class="h-[88rpx] w-[618rpx] flex items-center justify-center rounded-[44rpx] bg-[#3E88F7]">
          <u-icon size="24" name="weixin-fill" color="rgba(255,255,255)" />
          <span class="ml-[10rpx] text-white">微信登陆</span>
        </view>

        <view class="mt-[36rpx] h-[88rpx] w-[618rpx] flex items-center justify-center rounded-[44rpx] bg-[#3E88F7]" @click="jump('/views/login/mibble')">
          <u-icon size="24" name="man-add-fill" color="rgba(255,255,255)" />
          <span class="ml-[10rpx] text-white">手机登陆</span>
        </view>
      </view>
      <view class="hint mt-[24rpx]">
        登录代表同意
        <text class="link">
          用户协议、隐私政策，
        </text>
        并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { jump } from '@/utils/common';

// const jump = () => {
//   console.log(11);
//   uni.navigateTo({
//     url,
//   });
// };
</script>

<style lang="scss" scoped>
.login-form-wrap {

  @apply  mx-auto w-600rpx;

  input {
    @apply pb-6rpx mb-10rpx text-left;
  }

}

.lined {
  background: linear-gradient(179.92deg, rgba(212, 37, 23, 0.9) 10%, rgba(212, 37, 23, 0) 100%);
  filter: blur(600px);
}

.hint {
  @apply px-40rpx py-20rpx text-20rpx;

  color: $u-tips-color;

  .link {
    color: $u-warning;
  }
}
</style>
